<template>
  <!-- 会员卡管理页面 -->

  <!-- 搜索区块 -->
  <el-card>
    <!-- 使用栅格布局创建搜索表单 -->
    <el-row :gutter="20">
      <!-- 会员卡号搜索输入框 -->
      <el-col :span="6">
        <el-input v-model="searchForm.no" placeholder="请输入会员卡号"></el-input>
      </el-col>
      <!-- 手机号搜索输入框 -->
      <el-col :span="6">
        <el-input v-model="searchForm.tel" placeholder="请输入手机号"></el-input>
      </el-col>
      <!-- 姓名搜索输入框 -->
      <el-col :span="6">
        <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
      </el-col>
      <!-- 操作按钮区域 -->
      <el-col :span="6">
        <!-- 查询按钮 - 点击触发数据加载 -->
        <el-button type="primary" @click="loadData">查询</el-button>
        <!-- 重置按钮 - 点击清空搜索条件 -->
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
  </el-card>

  <!-- 信息区块 -->
  <el-card class="mt">
    <!-- 会员卡数据表格 -->
    <el-table :data="dataList" :loading="loading">
      <!-- 序号列 -->
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <!-- 会员卡号列 -->
      <el-table-column prop="memberCardNumber" label="会员卡号"></el-table-column>
      <!-- 卡类型列 -->
      <el-table-column prop="cardType" label="卡类型"></el-table-column>
      <!-- 开卡日期列 -->
      <el-table-column prop="issueDate" label="开卡日期"></el-table-column>
      <!-- 持卡人姓名列 -->
      <el-table-column prop="holderName" label="持卡人姓名"></el-table-column>
      <!-- 持卡人手机号列 -->
      <el-table-column prop="holderPhone" label="持卡人手机号"></el-table-column>
      <!-- 卡余额列 -->
      <el-table-column prop="cardBalance" label="卡余额"></el-table-column>

      <!-- 交易记录列 - 使用自定义模板展示 -->
      <el-table-column prop="transactionRecords" label="交易记录">
        <template #default="scope">
          <!-- 气泡卡片组件，用于展示交易记录详情 -->
          <el-popover
            placement="top-start"
            title="交易记录"
            :width="200"
            trigger="hover"
            content="交易记录内容"
          >
            <template #reference>
              <!-- 触发气泡卡片的按钮 -->
              <el-button class="m-2">当日记录</el-button>
            </template>
            <!-- 时间线组件，用于展示交易记录的时间顺序 -->
            <el-timeline style="max-width: 600px">
              <!-- 循环渲染每条交易记录 -->
              <el-timeline-item
                v-for="(item, index) in scope.row.transactionRecords"
                :key="index"
                color="#0bbd87"
                :timestamp="item.transactionDate"
              >
                <!-- 交易金额信息 -->
                <p>交易金额: {{ item.transactionAmount }}</p>
                <!-- 交易类型信息 -->
                <p>交易类型: {{ item.transactionType }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-popover>
        </template>
      </el-table-column>

      <!-- 有效期至列 -->
      <el-table-column prop="validUntil" label="有效期至"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <!-- 
      class: 应用样式类(mt:上边距, mb:下边距, fr:右浮动)
      v-model:current-page: 双向绑定当前页码
      v-model:page-size: 双向绑定每页显示数量
      :page-sizes: 可选择的每页显示数量选项
      background: 是否显示背景色
      layout: 分页组件布局元素
      :total: 数据总数
      @size-change: 每页数量变化事件处理
      @current-change: 当前页码变化事件处理
    -->
    <el-pagination
      class="mt mb fr"
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useHttp } from "@/hokes/useHttp";

// 搜索表单的响应式数据对象
const searchForm = ref({
  no: "", // 会员卡号搜索条件
  tel: "", // 手机号搜索条件
  name: "", // 姓名搜索条件
});

// 使用自定义的HTTP钩子，获取会员卡列表数据及相关操作方法
// 参数1: API接口地址
// 参数2: 搜索表单数据
const {
  dataList, // 会员卡数据列表
  loading, // 加载状态
  totals, // 数据总数
  pageInfo, // 分页信息(当前页码、每页数量)
  loadData, // 加载数据方法
  handleCurrentChange, // 处理页码变更方法
  handleSizeChange, // 处理每页数量变更方法
  resetPagination, // 重置分页信息方法
} = useHttp("/membercard/memberList", searchForm);

// 重置搜索表单和分页信息
const handleReset = () => {
  // 清空搜索条件
  searchForm.value = {
    no: "",
    tel: "",
    name: "",
  };
  // 重置分页到第一页
  resetPagination();
};
</script>

<style scoped>
/* 样式部分当前为空，可根据需要添加组件样式 */
/* mt: margin-top, mb: margin-bottom, fr: float-right 等类名通常来自全局样式 */
</style>
